<template>
  <div class="test-box">
    <div class="test-start">
      <div>
        props属性值:
        <p>{{ someProp }}</p>
        <p>{{ txt }}</p>
      </div>
      <a-button @click="handleChange1">测试</a-button>
      <div>测试展示值：{{ res1 }}</div>
    </div>

    <a-button @click="handleProps"> 给子组件传的值进行改变 </a-button>
    <!-- <TestHead /> -->
    <!-- <TestFoot /> -->
    <Login />
  </div>
</template>

<script>
// import TestHead from './components/TestHead.vue';
// import TestFoot from './components/TestFoot.vue';
import Login from "./components/Login.vue";
import {
  watch,
  computed,
  onBeforeMount,
  onMounted,
  ref,
  toRefs,
  provide,
  getCurrentInstance,
} from "vue";
export default {
  props: {
    someProp: {
      type: Number,
      default: () => 0,
    },
    txt: {
      type: String,
      default: () => "测试文本",
    },
  },
  components: {
    // TestHead,
    // TestFoot,
    Login,
  },
  setup(props, context) {
    console.log(props, context);
    // #region 生命周期，可重复使用，根据顺序执行
    onBeforeMount(() => {
      // 取全局变量，方式一
      // const internalInstance = getCurrentInstance();
      // const globalProperties = internalInstance.appContext.config.globalProperties;
      // const _http = globalProperties.$_http
      // const _API = globalProperties.$_API
      // 取全局变量，方式二
      const { proxy } = getCurrentInstance();
      const _http = proxy.$_http;
      const _API = proxy.$_API;

      console.log("onBeforeMount", _http);
      let params = {
        page: 0,
        size: 10,
      };
      _http.get(_API.INTERFACE_GET_USER_LIST, { params }).then((res) => {
        console.log("axios请求结果", res);
      });
    });
    onMounted(() => {
      console.log("onMounted1");
    });
    onMounted(() => {
      console.log("onMounted2");
    });
    // #endregion

    // ref：定义响应式变量
    const res1 = ref([]);
    // 方法对变量的改值
    const handleChangeRes1 = () => {
      return [1, 2, 3];
    };

    // toRefs：获取传递进来的属性[需要在props中定义接收]
    const allProps = toRefs(props);
    const { someProp } = toRefs(props);
    console.log("获取传递的参数", allProps, someProp);

    // #region  watch、computed 新的用法
    // 监听某个传递进来的属性
    watch(someProp, (newValue) => {
      console.log("获取传递的属性值变了", someProp, newValue);
    });
    // 计算属性
    let computedVal = computed(() => someProp.value * 10);
    // #endregion

    // provide：定义子组件需要的变量
    const propOne = ref(1);
    provide("str", propOne);
    const handlePropsAdd = (num) => {
      return propOne.value + num; // 注意setUp内部访问响应式变量是 data.value
    };

    // -------将属性、方法暴露给组件---------
    return {
      res1,
      handleChangeRes1,
      computedVal,
      propOne,
      handlePropsAdd,
    };
  },
  methods: {
    handleChange1() {
      // 使用setup中的函数赋值
      this.res1 = this.handleChangeRes1();
      console.log(this.res1);

      // 重新赋值=》依然是响应式变量
      setTimeout(() => {
        this.res1 = [0, 0, 0];
        console.log(this.res1);
      }, 1000);

      // ref等引入方法，适用于setUp中，不适用于之外 ===> 将 已暴露的属性 指向 新的响应式对象 是无效的操作，要响应则需要直接对 在 setup 阶段暴露的响应式对象 进行操作
      // 此处的res1，会看到值能被改变，但是不会实时响应了
      setTimeout(() => {
        this.res1 = ref(4);
        console.log(this.res1);
      }, 3000);
    },
    handleProps() {
      this.propOne = this.handlePropsAdd(2);
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.test-box {
  width: 100%;
  border: 1px dashed orangered;
  padding: 20px;
  .test-start {
    border-bottom: 1px dashed orangered;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}
</style>
